import React from 'react';
import moment from 'moment';
import { DatePicker } from 'antd';
import QueryButton from '../QueryButton';

import './index.less';

const dateFormat = 'YYYY-MM-DD';

class TimeInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { };
  }
  render() {
    const { queryMessage } = this.props;
    const time = queryMessage.dynamics;
    return (
      <div className="time-input">
        <div>
          <span>加入工作时间</span>
          <DatePicker
            placeholder="开始时间"
            value={!time.work_loc_st_data ? null : moment(time.work_loc_st_data, dateFormat)}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'work_loc_st_data')}
            style={{ marginLeft: 20, width: 95 }}
          />
          <DatePicker
            placeholder="结束时间"
            value={!time.work_loc_end_data ? null : moment(time.work_loc_end_data, dateFormat)}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'work_loc_end_data')}
            style={{ marginLeft: 10, width: 95 }}
          />
        </div>
        <div>
          <span>出生日期范围</span>
          <DatePicker
            placeholder="开始时间"
            value={!time.bir_st_data ? null : moment(time.bir_st_data, dateFormat)}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'bir_st_data')}
            style={{ marginLeft: 20, width: 95 }}
          />
          <DatePicker
            placeholder="结束时间"
            value={!time.bir_end_data ? null : moment(time.bir_end_data, dateFormat)}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'bir_end_data')}
            style={{ marginLeft: 10, width: 95 }}
          />
        </div>
        <div>
          <span>参加工作时间</span>
          <DatePicker
            placeholder="开始时间"
            value={!time.work_st_data ? null : moment(time.work_st_data, dateFormat)}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'work_st_data')}
            style={{ marginLeft: 20, width: 95 }}
          />
          <DatePicker
            placeholder="结束时间"
            value={!time.end_exp_date ? null : moment(time.end_exp_date, dateFormat)}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'end_exp_date')}
            style={{ marginLeft: 10, width: 95 }}
          />
        </div>
        <div>
          <span>合同签订时间</span>
          <DatePicker
            placeholder="开始时间"
            value={!time.end_exp_date ? null : moment(time.end_exp_date, dateFormat)}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'end_exp_date')}
            style={{ marginLeft: 20, width: 95 }}
          />
          <DatePicker
            placeholder="结束时间"
            value={!time.end_exp_date ? null : moment(time.end_exp_date, dateFormat)}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'end_exp_date')}
            style={{ marginLeft: 10, width: 95 }}
          />
        </div>
        <div>
          <span>合同到期时间</span>
          <DatePicker
            placeholder="开始时间"
            value={!time.end_exp_date ? null : moment(time.end_exp_date, dateFormat)}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'end_exp_date')}
            style={{ marginLeft: 20, width: 95 }}
          />
          <DatePicker
            placeholder="结束时间"
            value={!time.end_exp_date ? null : moment(time.end_exp_date, dateFormat)}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'end_exp_date')}
            style={{ marginLeft: 10, width: 95 }}
          />
        </div>
        <div>
          <span>进本单位工作时间</span>
          <DatePicker
            placeholder="开始时间"
            value={!time.end_exp_date ? null : moment(time.end_exp_date, dateFormat)}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'end_exp_date')}
            style={{ marginLeft: 20, width: 95 }}
          />
          <DatePicker
            placeholder="结束时间"
            value={!time.end_exp_date ? null : moment(time.end_exp_date, dateFormat)}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'end_exp_date')}
            style={{ marginLeft: 10, width: 95 }}
          />
        </div>
        <div className="query-button">
          <QueryButton />
        </div>
      </div>
    );
  }
}

export default TimeInput;
